<template>
	<div class="loginView">
		<div class="topContent">
			<div class="loginForm">
				<!-- <wj-Button type="info" @click.native="getCode" v-checksubmit>验证码</wj-Button> -->
				<!-- <wj-Input placeholder="请输入用户名" type="text" v-model="uname" clearable></wj-Input> -->
				<!-- <wj-Input placeholder="禁用的输入框" disabled></wj-Input> -->

				<!-- <wj-Input placeholder="请输入密码" type="password" v-model="upwd" label-width="120px" v-validate="'required|pwd'">用户名称</wj-Input> -->
				<!-- <wj-Input placeholder="请输入密码" type="password" v-model="upwd" label-width="120px" v-validate="'required|pwd'">用户名称</wj-Input> -->
				<div class="loginFormTitle">{{ baseInfo.loginTitle }}</div>
				<div class="loginFormItem">
					<wj-Input placeholder="请输入用户账户" type="text" v-model="userName" label-width="120px" v-validate="'required'">
						<i class="wj-icon-user"></i>
					</wj-Input>
				</div>
				<div class="loginFormItem">
					<wj-Input placeholder="请输入账户密码" type="password" v-model="password" label-width="120px" v-validate="'required'">
						<i class="wj-icon-icon2"></i>
					</wj-Input>
				</div>
				<div class="loginFormItemSplit">
					<wj-Input placeholder="请输入验证码" type="text" v-model="userCode" label-width="120px" v-validate="'required'">
						<i class="wj-icon-yanzhengma"></i>
					</wj-Input>
					<img :src="imageCode" style="width: 112px; height: 50px" @click="getLoginCodeImage" alt="无法加载" />
					<!-- 2. 创建容器元素
					<div id="auth_code"></div> -->
				</div>
				<div class="loginBtn" v-checksubmit="sysLogin">系统登录</div>
			</div>
		</div>
	</div>
</template>
<script>
import {loginFun, login_code, system_companyInfo} from "@/utils/request/api.js";
// 1.先导入
// import { GVerify } from "@/assets/js/code";
import baseInfo from "@/utils/config/baseInfo.json";
export default {
	name: "Login",
	data() {
		return {
			baseInfo: baseInfo,
			userName: "",
			password: "",
			userCode: "",
			verifyCode: "",
			imageCode: "",
		};
	},
	created() {
    this.getOem();
  },
	mounted() {
		// 获取验证码图片
		this.getLoginCodeImage();
		// 3.初始化渲染验证码canvas
		// this.verifyCode = new GVerify("auth_code");
		// 绑定监听事件
		window.addEventListener("keydown", this.keyDown);
	},
	destroyed() {
		// 移除监听事件
		window.removeEventListener("keydown", this.keyDown, false);
	},
	methods: {
    async getOem(){
      await system_companyInfo().then(res => {
        if (res.code === 200) {
          this.baseInfo = res.data;
        }
      });
    },
		// 获取验证码图片
		getLoginCodeImage() {
			login_code().then((res) => {
				console.log(res);
				let content = res.data;
				let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
				this.imageCode = URL.createObjectURL(blob);
			});
		},
		// 监听回车键执行事件
		keyDown(e) {
			// 回车则执行登录方法 enter键的ASCII是13
			if (e.keyCode === 13) {
				console.log(document.querySelectorAll("input"));
				// 登录页面input获取焦点  失去焦点
				var inputsArr = document.querySelectorAll("input");
				inputsArr.forEach((item) => {
					console.log(item);
					item.focus();
					item.blur();
				});
				this.sysLogin(); // 需要执行的方法
			}
		},
		// 系统登录
		sysLogin() {
			// 4.验证输入的验证码是否和生成的验证码一致
			// if (this.verifyCode.validate(this.userCode)) {
			this.$showLoading.show("正在加载，请稍后...", true, 3000);
			loginFun({
				loginName: this.userName,
				password: this.password,
				verifyCode: this.userCode,
			}).then((res) => {
				if (res.code == 200) {
					this.$store.commit("set_token", res.data.jwt);
					localStorage.setItem("employeeName", res.data.name);
					localStorage.setItem("employeeId", res.data.id);
					localStorage.setItem("menuArrData", JSON.stringify(this.menuData(res.data.role)));
					localStorage.setItem("role_monitor", res.data.role.monitor);
					localStorage.setItem("role_monitorApprove", res.data.role.monitorApprove);
					this.$msg.success("登录成功！");

					setTimeout(() => {
						this.$showLoading.hide(false);
						this.$router.push(
							{ path: this.menuDataGo(this.menuData(res.data.role)) },
							(onComplete) => {
								console.log(onComplete);
							},
							(onabort) => {
								console.log(onabort);
							}
						);
            if (res.data.isFirstLogin === 1) {
              this.$confirm("第一次登录请修改密码 ?", "温馨提示", {
                confirmButtonText: "确定",
                cancelButtonText: "忽略",
                type: "warning",
              }).then(() => {
                // 确认操作
                this.$router.push({ path: "/changeUserPassword" },)
              }).catch(() => {
                // 取消操作
                this.$msg.info("已忽略修改！");
              });
            }
					}, 1000);
				}
        else {
					// 5.清空code图片
					// this.verifyCode.refresh();
					// this.moreoverCodeMessage(res.code);
          this.$msg.error("登录失败，" + res.auditInfo);
					this.getLoginCodeImage();
					console.log(res);
					setTimeout(() => {
						this.$showLoading.hide(false);
					}, 1000);
				}
			});
		},
		// 菜单数据
		menuData(obj) {
			var menuArr = [
				// {
				// 	grade: 0,
				// 	disable: obj.homePage == 1 ? true : false,
				// 	// index: "/index/main",
				// 	index: "/mapScreenSecond",
				// 	iconClass: "wj-icon-shouye",
				// 	labe: "操作台",
				// 	children: [],
				// },
				{
					grade: 0,
					disable: obj.monitor == 1 ? true : false,
					index: "/monitoring",
					iconClass: "wj-icon-shouye",
					labe: "监控组",
					children: [],
				},
				{
					grade: 0,
					disable: obj.monitorApprove == 1 ? true : false,
					index: "/monitoring",
					iconClass: "wj-icon-shouye",
					labe: "监控组管理员",
					children: [],
				},
				{
					grade: 0,
					disable: obj.securityAudit == 1 ? true : false,
					index: "/index/audit",
					iconClass: "wj-icon-wenzhangguanli",
					labe: "安全审计",
					children: [],
				},
				{
					grade: 0,
					disable: obj.terminalManage == 1 ? true : false,
					index: "/index/terminal",
					iconClass: "wj-icon-weiwangguanicon-defuben-",
					labe: "设备管理",
					children: [],
				},
				{
					grade: 0,
					disable: obj.releaseResourceAllow == 1 ? true : false,
					index: "/index/admittance",
					iconClass: "wj-icon-guanliyuanshezhi",
					labe: "发布源准入",
					children: [],
				},
				{
					grade: 1,
					disable: obj.policyRelease == 1 ? true : false,
					index: "/index/character",
					iconClass: "wj-icon-guanjianziguanli",
					labe: "字符库",
					children: [
						// {
						// 	index: "/index/character/character_repertoire",
						// 	iconClass: "wj-icon-heimingdanguanli",
						// 	labe: "黑名单库",
						// },
						{
							index: "/index/character/character_keyword",
							iconClass: "wj-icon-baimingdanguanli",
							labe: "白名单库",
						},
					],
				},
				{
					grade: 1,
					disable: obj.policyRelease == 1 ? true : false,
					index: "/index/imglibrary",
					iconClass: "wj-icon-tuku",
					labe: "图片库",
					children: [
						{
							index: "/index/character/imglibrary_keyword",
							iconClass: "wj-icon-see7",
							labe: "白名单库",
						},
					],
				},
				{
					grade: 1,
					disable: obj.policyRelease == 1 ? true : false,
					index: "/index/strategy",
					iconClass: "wj-icon-shujuku",
					// labe: "过滤策略",
					labe: "策略配置",
					children: [
						{
							index: "/index/strategy/strategy_manage",
							iconClass: "wj-icon-celveguanli",
							labe: "字符策略",
						},
						// {
						// 	index: "/index/strategy/strategy_keyword",
						// 	iconClass: "wj-icon-guanjianziguanli",
						// 	labe: "白名单词库",
						// },
						{
							index: "/index/strategy/strategy_img",
							iconClass: "wj-icon-tupian",
							labe: "图片策略",
						},
						{
							index: "/index/strategy/strategy_safety",
							iconClass: "wj-icon-anquan",
							labe: "防火墙规则",
						},
						{
							index: "/index/strategy/strategy_voltage",
							iconClass: "wj-icon-guanjianziguanli",
							labe: "电源管控",
						},
						{
							index: "/index/strategy/strategy_overall",
							iconClass: "wj-icon-_canshu_canshushezhi",
							labe: "全局配置",
						},
					],
				},
				{
					grade: 0,
					disable: obj.realTimeWarning == 1 ? true : false,
					index: "/index/realtime",
					iconClass: "wj-icon-gaojing",
					labe: "实时告警",
					children: [],
				},
        {
          grade: 0,
          disable: obj.realTimeWarning == 1 || obj.systemAudit === 1 ? true : false,
          index: "/index/simHistory",
          iconClass: "wj-icon-gaojing",
          labe: "SIM卡短信历史记录",
          children: [],
        },
				// {
				// 	grade: 0,
				// 	disable: obj.releaseResourceAllow == 1 ? true : false,
				// 	index: "/index/workorder",
				// 	iconClass: "wj-icon-gongdanguanli",
				// 	labe: "工单管理",
				// 	children: [],
				// },
				{
					grade: 0,
					disable: obj.systemAudit == 1 ? true : false,
					index: "/index/inside",
					iconClass: "wj-icon-jiankong",
					labe: "内部审计",
					children: [],
				},
        {
          grade: 0,
          disable: obj.systemAudit == 1 ? true : false,
          index: "/index/approveLog",
          iconClass: "wj-icon-jiankong",
          labe: "审批日志",
          children: [],
        },
				// {
				// 	grade: 0,
				// 	disable: obj.securityProtective == 1 ? true : false,
				// 	index: "/index/safety",
				// 	iconClass: "wj-icon-anquan",
				// 	labe: "安全防护",
				// 	children: [],
				// },
				{
					grade: 0,
					disable: obj.syslogConfig == 1 ? true : false,
					index: "/index/syslog",
					iconClass: "wj-icon-renwujincheng",
					labe: "Syslog配置",
					children: [],
				},
				{
					grade: 1,
					disable: obj.systemConfig == 1 ? true : false,
					index: "/index/system",
					iconClass: "wj-icon-shezhi",
					labe: "系统设置",
					children: [
						{
							index: "/index/system/system_state",
							iconClass: "wj-icon-dashboard24",
							labe: "系统状态",
						},
						{
							index: "/index/system/system_network",
							iconClass: "wj-icon-wangluo",
							labe: "网络配置",
						},
						// {
						// 	index: "/index/system/system_parameter",
						// 	iconClass: "wj-icon-_canshu_canshushezhi",
						// 	labe: "参数配置",
						// },
						{
							index: "/index/system/system_user",
							iconClass: "wj-icon-jurassic_user",
							labe: "用户管理",
						},
						{
							index: "/index/system/system_role",
							iconClass: "wj-icon-jiaoseshezhi",
							labe: "角色管理",
						},
						{
							index: "/index/system/system_control",
							iconClass: "wj-icon-kongzhitai",
							labe: "安全运维网关升级",
						},
						{
							index: "/index/system/system_firmware",
							iconClass: "wj-icon-ruanjianshengji",
							labe: "前置装置升级",
						},
						{
							index: "/index/system/system_logstore",
							iconClass: "wj-icon-_canshu_canshushezhi",
							labe: "日志存储",
						},
						{
							index: "/index/system/system_backupAndRestore",
							iconClass: "wj-icon-anquan",
							labe: "系统备份与还原",
						},
						{
							index: "/index/system/system_about",
							iconClass: "wj-icon-guanyu",
							labe: "关于系统",
						},
					],
				},
			];
			return menuArr;
		},
		// 当前角色要跳转的菜单（菜单数据第一个为true的菜单）
		menuDataGo(arr) {
			for (var i = 0; i < arr.length; i++) {
				if (arr[i].disable == true) {
					if (arr[i].children.length <= 0) {
						return arr[i].index;
					} else {
						return arr[i].children[0].index;
					}
				}
			}
		},
		// 登录接口非200状态码
		moreoverCodeMessage(code) {
			switch (code) {
				case 500:
					this.$msg.error("登录失败,内部错误！");
					break;
				case 7000:
					this.$msg.error("登录失败，重复！");
					break;
				case 7001:
					this.$msg.error("登录失败，不存在！");
					break;
				case 7002:
					this.$msg.error("登录失败，锁定！");
					break;
				case 7003:
					this.$msg.error("登录失败！");
					break;
				case 7004:
					this.$msg.error("登录失败，角色不存在！");
					break;
				case 70012:
					this.$msg.error("登录失败，验证码错误！");
					break;
			}
		},
	},
};
</script>
<style lang="less" scoped>
.loginView {
	width: 100%;
	height: 100%;
	background-image: url("../assets/icon/loginBg.jpg");
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.topContent {
		/*width: 23%;
		height: 42%;*/
		width: 438px;
		height: 398px;
		overflow: hidden;
		box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.4);
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.loginForm {
			width: 100%;
			height: 100%;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.loginFormTitle {
				width: 100%;
				height: 78px;
				line-height: 78px;
				font-size: 28px;
				color: #fff;
				text-align: center;
				background-image: url("../assets/icon/loginTitleBg.png");
				background-position: center center;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-bottom: 14px;
			}

			.loginFormItem {
				width: 80%;
				margin: 9px 0;
				/deep/ .x_input .x_input_inner {
					margin-left: 0 !important;
					height: 52px;
					line-height: 52px;
					padding: 0 15px 0 52px;
				}
				/deep/ .tip_msg {
					top: 52px;
				}
				/deep/ [class*="wj-icon"] {
					font-size: 23px;
				}
			}
			.loginFormItemSplit {
				width: 80%;
				margin: 9px 0 22px 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				/deep/ .x_input {
					width: 64%;
				}
				/deep/ .x_input_inner {
					width: 100%;
					height: 52px;
					line-height: 52px;
					margin-left: 0 !important;
					padding: 0 15px 0 52px;
				}

				#auth_code {
					width: 32%;
					height: 50px;
					margin: 0 0 0 auto;
				}

				/deep/ [class*="wj-icon"] {
					font-size: 27px;
					margin-left: -1px;
				}

				/deep/ .tip_msg {
					top: 52px;
					right: 6px;
				}
			}
			.loginBtn {
				width: 80%;
				height: 52px;
				font-size: 16px;
				text-align: center;
				line-height: 52px;
				color: #fff;
				border-radius: 4px;
				background: #ff7b05;
			}
			.loginBtn:hover {
				cursor: pointer;
			}
		}
	}
}
</style>
